<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header class="header">
      <el-menu :default-active="$route.path"
               class="el-menu-demo"
               mode="horizontal"
               @select="handleSelect"
               text-color="black"
               active-text-color="green"
               :router="true">
        <el-submenu index="1"
                    style="margin-left:15%">
          <template slot="title">上海</template>
          <el-menu-item index="/index1">上海</el-menu-item>
          <el-menu-item index="/index2">南京</el-menu-item>
          <el-menu-item index="/index3">杭州</el-menu-item>
          <el-menu-item index="/index4">广州</el-menu-item>
          <el-menu-item index="/index5">深圳</el-menu-item>
          <el-menu-item index="/index6">北京</el-menu-item>
          <el-menu-item index="/index7">武汉</el-menu-item>
          <el-menu-item index="/index8">成都</el-menu-item>
          <el-menu-item index="/index9">青岛</el-menu-item>
        </el-submenu>
        <el-menu-item index="/index">首页</el-menu-item>
        <el-menu-item index="/shortRent">短租</el-menu-item>
        <el-menu-item index="/longRent">长租</el-menu-item>
        <el-menu-item index="/personalityRent">个性车</el-menu-item>
        <el-menu-item index="/becomeTheOwner">成为车主</el-menu-item>
        <el-menu-item index="/enterpriseCarRental">企业租车</el-menu-item>
        <el-menu-item index="/merchantsIn">商家入驻</el-menu-item>
        <el-menu-item index="/aboutUs">关于我们</el-menu-item>
        <el-menu-item index="/login?1">
          <el-button type="primary"
                     plain>登录</el-button>
        </el-menu-item>
        <el-menu-item index="/login?2">
          <el-button type="primary"
                     plain>注册</el-button>
        </el-menu-item>
      </el-menu>
    </el-header>
    <el-main class="main">
      <!-- 路由占位符 -->
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
export default ({
  name: 'Home',
  methods: {
    handleSelect (key, keyPath) {
      this.$router.push({
        path: key,
        params: { data: 'query' }
      })
    }
  }
})
</script>

<style lang="less" scoped>
el-menu-item {
  color: blue;
}
.home-container {
  width: 100%;
}
.header {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
}
.main {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
}
</style>
